<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
<title>修改资料</title>
<link href="/IndexPublic/selfhelp/css/style.css" type="text/css" rel="stylesheet">
<script src="/IndexPublic/selfhelp/js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/IndexPublic/js/jquery.form.js"></script>
<style type="text/css">
.imgpre{width: 150px; position: relative; margin-top: 5px; margin-left: 1px;}
.imgpre b{position: absolute; right: 6px; background-color: #f00; color: #fff; bottom: 5px;	width: 20px; height: 20px; line-height: 20px; border-radius: 100%; display: none; cursor: pointer;}
</style>
</head>

<body>
<!--上传图片截图代码段-->
<style>
	#clipArea { height: 300px; }
	#file, #clipBtn { margin: 0px; }
	.htmleaf-container{position:fixed; z-index: 100; top: 0px; width: 100%; height: 100%; overflow: hidden; background: #494A5F; color: #D5D6E2;}
	.topinfo1{margin: 12px;}
	.topinfo1 input{width: 70px; height: 32px; line-height: 32px; margin-left: 12px;}
	.topinfo1 button{float: right; margin-right: 12px; height: 24px; line-height: 17px;}
	.closeup{width: 40px; height: 40px;	border-radius: 100%; background-color: #d72825; color: #fff; line-height: 40px;	text-align: center;	font-size: 24px; position: absolute; bottom: 12px; left: 50%; margin-left: -20px;}
</style>
<article class="htmleaf-container" id="jieimgpro" style="display: none;">
	<div id="clipArea"></div>
	<div class="topinfo1">
		<input type="file" id="file">
		<button id="clipBtn">选定</button>
	</div>
	<div class="closeup">X</div>
</article>
<script src="/IndexPublic/selfhelp/js/iscroll-zoom.js"></script>
<script src="/IndexPublic/selfhelp/js/hammer.js"></script>
<script src="/IndexPublic/selfhelp/js/jquery.photoClip1.js"></script>
<script>
	$("#clipArea").photoClip({
		width: 320,
		height: 174,
		file: "#file",
		ok: "#clipBtn",
		loadStart: function() {
			console.log("照片读取中");
		},
		loadComplete: function() {
			$("#upimgvideourl").html("上传完毕");
			console.log("照片读取完成");
		},
		clipFinish: function(dataURL) {
			console.log(dataURL);
		}
	});
</script>

<input type="hidden" name="videourlok" value="{$info['videourl']}" />
<input type="hidden" name="resourceid" value="{$info['id']}" />
<div class="w">
	<div class="upload-car">
		<div id="main">
			<div class="demo">
				<div class="btn videobtn">
					<h3>1.上传视频<label>提示：文件必须是mp4、mov、ogg格式，文件名中不能包含中文，大小不超过30M</label></h3>
					<span>点击上传视频</span>
					<input accept="video/*" id="fileupload" type="file" name="myfiles" />
				</div>
				<div class="uploadjd" style="display:none;">
					<div class="progress">
						<span class="bar"></span>
						<span class="percent">0%</span>
					</div>
					<div class="delete"><img src="/IndexPublic/images/lajiimg.jpg"></div>
				</div>
				<div id="showimg"></div>
			</div>
		</div>
		<div id="main1">
			<div class="demo">
				<div class="btn imgbtn">
					<h3>2.上传视频图片<label>提示：文件必须是img,gif,png格式</label></h3>
					<span id="upimgvideourl">点击上传图片</span>
					<div class="imgpre"><img src="{$info['imgurl']}" width='150' style="display: none;" /><b class="deleteimg" rel="{$info['imgurl']}">X</b></div>
				</div>
			</div>
		</div>
		<form method="post" action="{:U('edit',array('id'=>$info['id']))}" name="form2" id="form2">
			<input type="hidden" name="imgurl" value="{$info['imgurl']}" />
			<input type="hidden" name="weburl" value="{$weburl}" />
			<input type="hidden" name="videourl" value="{$info['videourl']}" />
			<h3>3.视频标题</h3>
			<input type="text" name="title" value="{$info['title']}" class="inputtext" placeholder="视频标题" />
			<h3>4.视频简介</h3>
			<textarea rows="4" name="des" id="textarea" placeholder="视频简介">{$info['des']}</textarea>
			<h3>5.企业官网（可选）</h3>
			<input type="text" name="eplink" value="{$info['eplink']}" class="inputtext" placeholder="可选项，如不需要则不用填" />
			<h3>6.联系电话（可选）</h3>
			<input type="tel" name="tel" value="{$info['tel']}" class="inputtext" placeholder="可选项，如不需要则不用填" />
			<h3>7.商城网址（可选）</h3>
			<input type="text" name="shoplink" value="{$info['shoplink']}" class="inputtext" placeholder="可选项，如不需要则不用填" />
	</div>
	<div class="btn-box clearfix">
		<input type="submit" class="upload-btn submitbtn" value="确认修改" />
		<a href="{:U('/Selfhelp/Index/lists')}" class="cancel-btn">取消</a>
	</div>
	</form>
</div>

<script type="text/javascript">
	$(function () {
		/*关闭*/
		$(".closeup").click(function(){
			/*清除上传信息*/
			$(".photo-clip-rotateLayer").html(null);
			$("#file").val(null);
			$("#jieimgpro").hide();
		})

		$("#upimgvideourl").click(function(){
			$("#jieimgpro").show();
		})

		/*上传视频*/
		var bar = $('.bar');
		var percent = $('.percent');
		var showimg = $('#showimg');
		var progress = $(".progress");
		var btn = $("div.videobtn span");
		var deletes = $('.delete');
		$("#fileupload").wrap("<form id='myupload' name='myupload' action='{:U('up')}' method='post' enctype='multipart/form-data'></form>");
		$("#fileupload").change(function(){
			//var f = $(this).val();
			//alert(changefilenmae(f));
			//return false;
			$("#myupload").ajaxSubmit({
				dataType:  'json',
				beforeSend: function() {
					showimg.empty();
					progress.show();
					$("#main").css({"height":"142px"});
					$(".uploadjd").show();
					var percentVal = '0%';
					bar.width(percentVal);
					percent.html(percentVal);
					btn.html("上传中...");
				},
				uploadProgress: function(event, position, total, percentComplete) {
					var percentVal = percentComplete + '%';
					bar.width(percentVal);
					percent.html(percentVal);
					if(percentVal=='100%'){
						btn.html("上传完毕");
						deletes.show();
					}
				},
				success: function(result) {
					if(result==1){
						chstatus();
						alert('文件格式不正确');
						return false;
					}
				},
				error:function(xhr){
					var result = xhr.responseText;
					if(result==0){
						chstatus();
						alert('上传失败');
						return false;
					}else if(result==2){
						chstatus();
						alert('超出限定范围30M');
						return false;
					}else if(result==3){
						chstatus();
						alert('请选择要上传的视频文件');
						return false;
					}else{
						if(xhr.status=='404'){
							chstatus();
							alert('大小超出限定范围30M');
							return false;
						}else{
							//result //返回视频路径
							deletes.attr('rel',result);
							$("input[name='videourl']").val(result);
							return false;
						}

					}

				}
			});
		});

		function writeObj(obj){
			var description = "";
			for(var i in obj){
				var property=obj[i];
				description+=i+" = "+property+"\n";
			}
			alert(description);
		}

		$(".delete").click(function(){
			var p_res = $(this).attr("rel");
			var resourceid = $("input[name='resourceid']").val();
			$.post("/Selfhelp/Index/deleteres",{p_res:p_res,resourceid:resourceid},function(msg){
				if(msg==1){
					alert("删除成功！");
					$("#main").css({"height":"auto"});
					$(".videobtn span").html("点击上传视频");
					$('.delete').removeAttr('rel');
					$('.delete').hide();
					$("input[name='videourl']").val('');
					$("input[name='myfiles']").val(null);
					$(".uploadjd").hide();
				}
			});
		})

		$(".deleteimg").click(function(){
			var p_res = $(this).attr("rel");
			var resourceid = $("input[name='resourceid']").val();
			$.post("/Selfhelp/Index/deleteimg",{p_res:p_res,resourceid:resourceid},function(msg){
				if(msg==1){
					alert("删除成功！");
					$("input[name='imgurl']").val('');
					$(".imgbtn span").html("点击上传图片");
					$(".imgpre img").removeAttr('src');
					$(".imgpre img").hide();
					$('.deleteimg').removeAttr('rel');
					$(".deleteimg").hide();
				}
			});
		})

		function changefilenmae(fileinfo){
			$.post("/Selfhelp/Index/changefilename",{'fileinfo':fileinfo},function(msg){
				//alert(msg);
//				if(msg==1){
//					return 1;
//				}else{
//					return 0;
//				}
			});
		}

		function loadingchange(){
			var getvideourl = $("input[name='videourlok']").val();
			if($("input[name='videourlok']").val()!=''){
				$(".videobtn span").html('上传完毕');
				$("#main").css({"height":"142px"});
				$("div.uploadjd").show();
				$("span.percent").html("100%");
				$("span.bar").css({"width":"100%"});
				$("div.delete").show();
				$("div.delete").attr('rel',getvideourl);
			}
		}

		function chstatus(){
			$(".videobtn span").html("点击上传视频");
			$('.delete').removeAttr('rel');
			$('.delete').hide();
			$("input[name='myfiles']").val(null);
			$("input[name='videourl']").val('');
			$("#main").css({"height":"auto"});
			$("span.percent").html("0%");
			$("span.bar").css({"width":"0%"});
			$("div.uploadjd").hide();
		}

		function chstatusimg(){
			$(".imgbtn span").html("点击上传图片");
			$("input[name='myimgfiles']").val(null);
			$("input[name='imgurl']").val('');
		}

		window.onload = function(){
			loadingchange();
			lodingimg();
		}

		function lodingimg(){
			var imgurl = $("input[name='imgurl']").val();
			if(imgurl!=''){
				$(".imgpre img").show();
				$(".imgpre b").show();
				$(".imgbtn span").html("上传完毕");
			}
		}


	});
</script>

</body>
</html>
